

class Tab{
  constructor(o){
    // 获取到最大的div
    this.o=o;
    this.wrap=document.getElementById(o.ele)
    this.init() 
  }
  init(){ //初始化方法外套
     this.wrap.style.width=this.o.wrapWidth;
     this.wrap.style.height=this.o.wrapHeight;
     this.wrap.style.background=this.o.wrapBack
     this.initNav()
     this.initDivs()
  } 
  initNav(){//初始化导航
      let uls=document.createElement("ul");
      uls.style.heigth="100px";
      uls.style.display="flex";
       uls.style.justifyContent="space-between"
      //  根据用户的数据生成导航
      this.o.navList.forEach((item,index)=>{
        let li=document.createElement("li");
        li.innerHTML=item;
        li.style.width="100px"
        li.style.height="80px";
        li.style.background="blue";
        li.style.lineHeight="80px";
        li.style.textAlign="center";
        if(index==0){ //第一个li默认样式
           li.style.background="green"
          li.style.color="white"
        }
        uls.appendChild(li)
      })
      // 获取第一个div
      let divfirst=document.querySelector(`#${this.o.ele} div`)
      this.wrap.insertBefore(uls,divfirst)
  }
  initDivs(){ //初始化div
      let divs=document.querySelectorAll(`#${this.o.ele} div`)
      for(let i=0;i<divs.length;i++){
          divs[i].style.display="none"
      }
      divs[0].style.display="block"
      this.changeNav()
  }
  changeNav(){ //切换方法
     let lis=document.querySelectorAll(`#${this.o.ele} li`)
     let divs=document.querySelectorAll(`#${this.o.ele} div`)
     for(let i=0;i<lis.length;i++){
      lis[i].onclick=function () {
        for(let j=0;j<divs.length;j++){
             divs[j].style.display="none"
              lis[j].style.background="blue";
             lis[j].style.color="black";
        }
          divs[i].style.display="block"
          this.style.background="green"
          this.style.color="white";
      }
     }
  }
  
}
